<template>
  <div class="page">
    <h3 class="page__title">XX 组件库</h3>
    <div>
      <h4>
        <el-tag type="danger">测试 store</el-tag>
      </h4>
      <el-button ref="btn" size="mini" @click="getMsg">vuex 获取数据</el-button>
      <el-button
        ref="btn"
        size="mini"
        type="primary"
        @click="handelAuth"
      >
        我要快速鉴权
      </el-button>
      msg: {{ msg }}
    </div>
    <div>
      <h4>
        <el-tag type="danger">测试 markdown</el-tag>
      </h4>
      <el-select v-model="val" value-key="code">
        <el-option
          v-for="item in values"
          :key="item.code"
          :value="item"
          :label="item.name"
        />
      </el-select>
      <demo />
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { appModule } from '@/store/modules/app'
import demo from './docs/demo.md'

@Component({
  name: 'App',
  data() {
    return {
      visible: false,
      jsStr: `let res = {};
var arr = ['TOKEN', 'MALLSHOPID', 'TENANTID', 'LANG', 'CLINICID', 'x-user-ip', 'x-user-mac', 'x-ticket-code', 'host'];
arr.forEach(item => {
  if (localStorage.getItem(item)) {
    res[item] = localStorage.getItem(item)
  }
});
console.log(JSON.stringify(res));`,
      jsonString: '',
    }
  },
  methods:{
    handelAuth() {
      this.visible = true
    },
    setLocalStorage() {
      let c = JSON.parse(this.jsonString)
      Object.keys(c).forEach(item => {
        localStorage[item] = c[item]
      })
      this.visible = false
    },
  },
  components: {
    demo,
  },
})

export default class extends Vue {
  // 这是计算属性，同 vue computed
  get msg() {
    return appModule.msg
  }
  private values = [
    { code: 'a', name: '酱油' },
    { code: 'b', name: '辣椒' },
    { code: 'c', name: '香醋' },
  ]
  private val = {  }
  // 这是方法同 vue methods
  private getMsg() {
    if (!this.msg) appModule.setMsg('这是 msg 里的消息内容')
    else appModule.setMsg('')
  }
  private mounted() {
    this.val = { code: 'b' }
    console.log('list:', this.val)
    // console.log((this.$refs.btn as Vue).$emit('click'))
  }
}
</script>
<style scoped>
.war{border: 1px solid #DCDFE6;padding:5px;margin-bottom:5px}
.page__title {
  text-align: center;
  color: #8c888b;
  font-size: 24px;
  font-weight: bold;
  background: -webkit-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
  color: transparent;
  /*设置字体颜色透明*/
  -webkit-background-clip: text;
  /*背景裁剪为文本形式*/
  animation: ran 12s linear infinite;
}
@keyframes ran {
  from {
    backgroud-position: 0 0;
  }
  to {
    background-position: 2000px 0;
  }
}
</style>
